<template>
  <el-dropdown trigger="click" @command="(command) => handleSelectLanguage(command)">
    <div class="language-wrapper" :style="{'color': props.colorStyle}">
      <svg-icon icon-class="language" style="font-size: 20px; min-width: 18px"/>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="item in languages" :key="item.name" >
          <el-dropdown-item :command="item">
            <div class="flex items-center" :style="item.language === locale ? 'color: var(--el-color-primary)' : ''">
              {{ item.name }}
              <el-icon v-if="item.language === locale" class="ml-10" :size="16"><Check /></el-icon>
            </div>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup name="Language">
import { useI18n } from 'vue-i18n';
import {CacheUtil} from "@/utils/cacheUtil.js";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {Check} from "@element-plus/icons-vue";
const props = defineProps({
  colorStyle: {
    type: String,
    default: "var(--el-color-white)"
  }
})
const { locale } = useI18n();
const languages = ref([
  {name: '中文', language: 'zh-cn'},
  {name: 'English', language: 'en'},
])

function handleSelectLanguage(item) {
  locale.value = item.language;
  CacheUtil.setLanguage(item.language);
}


</script>
<style scoped lang="scss">
</style>